const path = require('path')
const { merge } = require('webpack-merge')
const commonConfig = require('./webpack.common')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const prodConfig = {
	mode: 'production',
	output: {
		filename: 'js/[name]-[contenthash:8].bundle.js',
	},
	devtool: 'none',
	module: {
		rules: [
			{
				test: /\.vue$/,
				use: 'vue-loader',
			},
			{
				test: /\.(vue|js)$/,
				enforce: 'pre',
				exclude: /node_modules/,
				use: 'eslint-loader',
			},
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: 'babel-loader',
			},
			{
				test: /\.css/,
				use: [MiniCssExtractPlugin.loader, 'css-loader'],
			},
			{
				test: /\.less/,
				use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
			},
			{
				test: /\.(jpe?g|png|gif)$/,
				use: {
					loader: 'url-loader',
					options: {
						esModule: false,
						limit: 2 * 1024,
						name: 'assets/[name]-[contenthash:8].[ext]',
					},
				},
			},
			{
				test: /\.(ttf|woff)$/,
				use: {
					loader: 'file-loader',
					options: {
						name: 'assets/[name]-[contenthash:8].[ext]',
					},
				},
			},
		],
	},
	optimization: {
		usedExports: true,
		minimize: true,
		splitChunks: {
			chunks: 'all',
			cacheGroups: {
				libs: {
					name: 'chunk-libs',
					test: /[\\/]node_modules[\\/]/,
					priority: 10,
					chunks: 'initial',
				},
				commons: {
					name: 'chunks-common',
					test: path.join(__dirname, 'src/components'),
					priority: 5,
					reuseExistingChunk: true,
				},
			},
		},
	},
	plugins: [
		new CleanWebpackPlugin(),
		new MiniCssExtractPlugin({
			filename: 'css/[name]-[contenthash:8].bundle.css',
		}),
	],
}

module.exports = merge(commonConfig, prodConfig)
